<template>
  <el-card>
    <el-row>
      <el-col :span="11">
        <div id="div1" style="height: 75vh;width:40vw;"></div>
      </el-col>
      <el-col :span="13">
        <div id="div2" style="height: 75vh;width:40vw;"></div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "DisciplineAnalyse",
  mounted() {
    this.init();
  },
  methods: {
    init(){
      let option1 = {
        title: {
          text: '各会议室违规次数分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '违规次数',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 104, name: '1号会议室' },
              { value: 73, name: '2号会议室' },
              { value: 58, name: '3号会议室' },
              { value: 68, name: '4号会议室' },
              { value: 78, name: '5号会议室' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let option2 = {
        title: {
          text: '本年度每月违规次数分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [15, 23, 22, 21, 13, 14, 26,85,45,56,12,41],
            type: 'line'
          }
        ]
      };
      let myChart = this.$echarts.init(document.getElementById('div1'));
      window.onresize = myChart.resize;
      myChart.setOption(option1);
      let myChart2 = this.$echarts.init(document.getElementById('div2'));
      window.onresize = myChart2.resize;
      myChart2.setOption(option2);
    }
  }
}
</script>

<style scoped>

</style>
